<template>
	<!-- 文件夹列表 -->
	<view class="cs-file-x">
		<view class="cs-file" v-if="file_list.length > 0">
			<view class="cs-file-swiper" v-for="(item,index) in file_list" :key='index'>
				<uni-swipe-action>
					<uni-swipe-action-item  :options="options" @change="changeSwiper" @click='clickSwiper(index, $event)'>
					<view class='cs-file-swiper-item' @click="linkFileDetail(index)">
						<i class="iconfont iconwenjianjia1"></i>
						<view>
							<view style="font-size: 32upx;color: #333333;">{{item.folder}}</view>
							<view style="font-size: 24upx;color: #C2C2C2;">{{item.Time}}</view>
						</view>
						<view class="cr">{{item.notes_num}}条笔记</view>
					</view>
					</uni-swipe-action-item>
				</uni-swipe-action>
			</view>
			<uni-load-more v-if="file_list.length >= 10" :status="status" :content-text="contentText" />
		</view>
	</view>
</template>

<script>
	import uniSwipeAction from "@/components/uni-swipe-action/uni-swipe-action"
	export default {
		components: {
			uniSwipeAction,
		},
		props: {
			status: String,
			contentText: Object,
			file_list: Array,
		},
		data() {
			return {
				noteType: uni.getStorageSync('noteType'), //1家长 2孩子 
				options: [{
					text: '编辑',
					style: {backgroundColor: '#FF9900'}
				}, {
					text: '删除',
					style: {backgroundColor: '#FF7171'}
				}]
			}
		},
		created() {
			if(this.noteType == 2) {
				this.options = [];
			}
		},
		methods: {
			// 进入文件详情
			linkFileDetail(index) {
				// 将文件ID带过去
				let unid = this.file_list[index].unid
				let name = this.file_list[index].folder
				uni.navigateTo({
					url: `./component/tabs-file-detail?unid=${unid}&name=${name}`
				})
			},
			// 滑动点击 删除/编辑事件
			clickSwiper(index,event) {
				// 0 编辑 1删除
				if (event.index === 0) {
					// 将文件ID和名称带过去
					let unid = this.file_list[index].unid
					let name = this.file_list[index].folder
					// let folderName = encodeURIComponent(this.file_list[index].folderName) // 处理中文名称进行编码处理
					// 跳转编辑文件夹
					uni.navigateTo({url: `./component/tabs-file-new?unid=${unid}&name=${name}`})
				} else {
					// 点击删除，告诉父组件,以便显示
					this.$emit('clickFileDelete', index)
				}
			},
			// 滑动监听事件 
			changeSwiper(open) {
			},
		}
	}
</script>

<style lang="scss">
	// 条件编译改变checkbox
	/* #ifdef APP-PLUS ||MP-WEIXIN */
	checkbox .wx-checkbox-input {
		bottom: none;
		border-radius: 50% !important;
	}
	/* #endif */
	.cs-file-x{
		margin-top: 106upx;
		margin-bottom: 120upx;
	}
	.cs-file{
		margin: 30upx;
	}
	.cs-file-swiper{
		margin-bottom: 20upx;
	}
	.cs-file-swiper:last-child {
		margin-bottom: 100upx;
	}
	.cs-file-swiper-item{
		display: flex;
		padding: 0upx 30upx;
		justify-content: space-between;
		align-items: center;
		background: #FFFFFF;
		& i {
			color: #FF9900;
			font-size: 80upx;
			margin-right: 24upx;
		}
		.ml {margin-left: 80upx;}
		.cr {
			position: absolute;
			right: 30upx;
			color: #999999;
			white-space: nowrap;
			font-size: 28upx;
		}
	}
</style>
